<template>
  <div class="notification-container" v-if="notifications.length > 0">
    <div class="notification-list">
      <div
        v-for="notification in notifications"
        :key="notification.id"
        class="notification-item"
        :class="{ unread: !notification.isRead }"
      >
        <div class="notification-content">{{ notification.content }}</div>
        <div class="notification-time">{{ formatDate(notification.createTime) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// 删除未使用的ref和onMounted导入

export default {
  name: 'NotificationComponent', // 修改为多单词名称
  props: {
    notifications: {
      type: Array,
      required: true
    }
  },
  setup() {
    // 格式化日期
    const formatDate = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleString()
    }

    return {
      formatDate
    }
  }
}
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  z-index: 9999;
}

.notification-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-item {
  padding: 10px 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.unread {
  border-left: 4px solid #4e6ef2;
}

.notification-content {
  font-size: 14px;
  margin-bottom: 5px;
}

.notification-time {
  font-size: 12px;
  color: #999;
}
</style>